<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><meta name="exporter-version" content="Evernote Mac 9.4.6 (461470)"/><meta name="author" content="704206198@qq.com"/><meta name="created" content="2020-08-23 08:08:19 +0000"/><meta name="source" content="desktop.mac"/><meta name="updated" content="2020-10-21 08:01:44 +0000"/><meta name="content-class" content="yinxiang.markdown"/><title>day03：VUE - 组件</title></head><body><div style="font-size: 14px; margin: 0; padding: 0; width: 100%;"><div style="line-height: 160%; box-sizing: content-box;"><ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333;"><li style="line-height: 160%; box-sizing: content-box; position: relative;"><a style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">一、组件的概念
</a><ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;"><li style="line-height: 160%; box-sizing: content-box; position: relative;"><a style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">1. 组件
</a></li><li style="line-height: 160%; box-sizing: content-box; position: relative;"><a style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">2. vue中的组件
</a></li></ul></li><li style="line-height: 160%; box-sizing: content-box; position: relative;"><a style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">二、全局注册组件
</a></li><li style="line-height: 160%; box-sizing: content-box; position: relative;"><a style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">三、局部注册组件
</a></li><li style="line-height: 160%; box-sizing: content-box; position: relative;"><a style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">四、组件之间的关系
</a><ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;"><li style="line-height: 160%; box-sizing: content-box; position: relative;"><a style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">1. 父子组件
</a><ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;"><li style="line-height: 160%; box-sizing: content-box; position: relative;"><a style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">组件的嵌套
</a></li><li style="line-height: 160%; box-sizing: content-box; position: relative;"><a style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">父子组件的传值 - 非常重要
</a><ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;"><li style="line-height: 160%; box-sizing: content-box; position: relative;"><a style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">(一) 父组件给子组件传值
</a></li><li style="line-height: 160%; box-sizing: content-box; position: relative;"><a style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">(二) 子组件给父组件传值
</a></li></ul></li></ul></li><li style="line-height: 160%; box-sizing: content-box; position: relative;"><a style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">2. 兄弟组件 - 传值
</a></li><li style="line-height: 160%; box-sizing: content-box; position: relative;"><a style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">3. 子组件使用父组件的方法和数据
</a></li><li style="line-height: 160%; box-sizing: content-box; position: relative;"><a style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">4. 父组件使用子组件的方法和数据
</a></li></ul></li><li style="line-height: 160%; box-sizing: content-box; position: relative;"><a style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">五、provide + inject
</a></li></ul></div><h1 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 41px; border-bottom: 3px double #999; color: #000; margin-top: 14px;">一、组件的概念</h1>
<h3 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 27px; color: #333;">1. 组件</h3>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">组件，是对数据和方法的简单封装。组件可以有自己的属性和方法。属性是组件数据的简单访问者。方法则是组件的一些简单而可见的功能。</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">使用组件可以实现<strong style="line-height: 160%; box-sizing: content-box; font-weight: 700;">拖放式编程</strong>、<strong style="line-height: 160%; box-sizing: content-box; font-weight: 700;">快速的属性处理</strong>以及<strong style="line-height: 160%; box-sizing: content-box; font-weight: 700;">真正的面向对象</strong>的设计。</li>
</ul>
<h3 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 27px; color: #333;">2. vue中的组件</h3>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">组件（Component）是 Vue.js 最强大的功能之一。</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">组件可以扩展 HTML 元素，封装可重用的代码。</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：<br/>
<img src="day03%EF%BC%9AVUE%20-%20%E7%BB%84%E4%BB%B6.resources/12D44913-9D6F-4C00-8C01-5EC4D69E58F0.png" height="544" width="1406"/></li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">组件化开发，类似于模块化开发，但并不等同于模块化开发。
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">组件化开发，包括页面，样式，行为（业务逻辑）</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">模块化开发，只包括行为（业务逻辑）</li>
</ul>
</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">vue中的组件分为<strong style="line-height: 160%; box-sizing: content-box; font-weight: 700;">全局注册组件</strong>和<strong style="line-height: 160%; box-sizing: content-box; font-weight: 700;">局部注册组件</strong>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">组件是特殊的实例</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">组件选项和实例选项基本保持一致</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">组件没有el选项，有template选项
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">template可以是一段html代码，也可以直接指向页面模板，类似于el选项</li>
</ul>
</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">组件的data选项必须是一个函数，返回一个对象
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">组件渲染时，数据会有作用域，如果自身没有定义，则不会渲染(数据也可以由上级传递 - 组件之间的传值)</li>
</ul>
</li>
</ul>
</li>
</ul>
<h1 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 41px; border-bottom: 3px double #999; color: #000;">二、全局注册组件</h1>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">vue实例创建之前</li>
</ul>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">body</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">id</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"app"</span>&gt;</span>
        {{msg}}
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">hello-temp</span>&gt;</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">hello-temp</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">body</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">src</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"libs/vue.js"</span>&gt;</span><span style="line-height: 160%; box-sizing: content-box;"/><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span><span style="line-height: 160%; box-sizing: content-box;">
    Vue.component(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'hello-temp'</span>, {
        <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">template</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">`&lt;div&gt;
                     &lt;h1&gt;{{msg}}&lt;/h1&gt;
                  &lt;/div&gt;`</span>,
        <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">data</span>: <span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">function</span> (<span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;"/>) </span>{
            <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">return</span> {
                <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">msg</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"hello vue temp"</span>
            }
        }
    });
    <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> vm = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> Vue({
        <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">el</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"#app"</span>,
        <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">data</span>:{
            <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">msg</span>:<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"hello vue"</span>
        }
    })
</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span>
</code></pre>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">但是以上案例并不推荐使用，因为在js的字符中书写html代码，不会自动进行语法检查，不方便书写，也不方便调试</li>
</ul>
<hr style="line-height: 160%; box-sizing: content-box; border-top: 1px solid #eee; margin: 16px 0;"/>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">建议使用vue提供的template标签，创建模板，然后再注册到组件</li>
</ul>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">body</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">id</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"app"</span>&gt;</span>
        {{msg}}
        <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">&lt;!-- 3.使用组件 --&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">hello-temp</span>&gt;</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">hello-temp</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">body</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">src</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"libs/vue.js"</span>&gt;</span><span style="line-height: 160%; box-sizing: content-box;"/><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span>
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">&lt;!-- 1.创建组件模板 --&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">template</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">id</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"temp"</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">h1</span>&gt;</span>{{msg}}<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">h1</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">template</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span><span style="line-height: 160%; box-sizing: content-box;">
    <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 2.注册组件</span>
    Vue.component(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'hello-temp'</span>, {
        template: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"#temp"</span>,
        data: <span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">function</span> <span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;">()</span> </span>{
            <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">return</span> {
                msg: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"hello vue temp 2"</span>
            }
        }
    });
    <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> vm = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> Vue({
        el: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"#app"</span>,
        data: {
            msg: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"hello vue"</span>
        }
    })
</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span>
</code></pre>
<h1 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 41px; border-bottom: 3px double #999; color: #000;">三、局部注册组件</h1>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">vue实例内部选项</li>
</ul>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">body</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">id</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"app"</span>&gt;</span>
        {{msg}}
        <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">&lt;!-- 4.使用组件 --&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">my-com</span>&gt;</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">my-com</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">body</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">src</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"libs/vue.js"</span>&gt;</span><span style="line-height: 160%; box-sizing: content-box;"/><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span>
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">&lt;!-- 1.创建组件模板 --&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">template</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">id</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"temp"</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">h1</span>&gt;</span>{{msg}}<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">h1</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">template</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span><span style="line-height: 160%; box-sizing: content-box;">
    <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 2.定义组件</span>
    <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> com = {
        template: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"#temp"</span>,
        data() {
            <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">return</span> {
                msg: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"helle temp 3"</span>
            }
        }
    }

    <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> vm = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> Vue({
        el: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"#app"</span>,
        data: {
            msg: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"hello vue"</span>
        },
        components: {
            <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 3.注册局部组件，谁注册谁使用！</span>
            <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"my-com"</span>: com,
        }
    })
</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span>
</code></pre>
<h1 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 41px; border-bottom: 3px double #999; color: #000;">四、组件之间的关系</h1>
<h3 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 27px; color: #333;">1. 父子组件</h3>
<h4 style="line-height: 160%; box-sizing: content-box; font-size: 20px; color: #333;">组件的嵌套</h4>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">body</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">id</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"app"</span>&gt;</span>
        {{msg}}
        <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">&lt;!-- 7.使用父组件 --&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">my-com</span>&gt;</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">my-com</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">body</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">src</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"libs/vue.js"</span>&gt;</span><span style="line-height: 160%; box-sizing: content-box;"/><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span>
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">&lt;!-- 1.创建父组件模板 --&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">template</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">id</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"temp"</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">h1</span>&gt;</span>{{msg}}<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">h1</span>&gt;</span>
        <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">&lt;!-- 8.使用子组件 --&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">child-com</span>&gt;</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">child-com</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">template</span>&gt;</span>
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">&lt;!-- 2.创建子组件模板 --&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">template</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">id</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"child"</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">h2</span>&gt;</span>{{msg}}<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">h2</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">template</span>&gt;</span>

<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span><span style="line-height: 160%; box-sizing: content-box;">
    <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 3.定义子组件</span>
    <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> child = {
        template: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"#child"</span>,
        data() {
            <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">return</span> {
                msg: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"hello child-temp"</span>
            }
        }
    }
    <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 4.定义父组件</span>
    <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> com = {
        template: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"#temp"</span>,
        data() {
            <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">return</span> {
                msg: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"helle temp 3"</span>
            }
        },
        components: {
            <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 6.注册局部组件(子组件)，谁注册谁使用！</span>
            <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"child-com"</span>: child
        }
    }

    <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> vm = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> Vue({
        el: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"#app"</span>,
        data: {
            msg: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"hello vue"</span>
        },
        components: {
            <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 5.注册局部组件(父组件)，谁注册谁使用！</span>
            <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"my-com"</span>: com,
        }
    })
</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span>
</code></pre>
<h4 style="line-height: 160%; box-sizing: content-box; font-size: 20px; color: #333;"><strong style="line-height: 160%; box-sizing: content-box; font-weight: 700;">父子组件的传值</strong> - <strong style="line-height: 160%; box-sizing: content-box; font-weight: 700;">非常重要</strong></h4>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">(一) 父组件给子组件传值</h5>
<ol style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal;">
<li style="line-height: 160%; box-sizing: content-box;">父组件传递
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">父组件在调用子组件的位置，添加一个自定义属性，属性的值就是父组件传入子组件的值。</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">如果属性值是一个变量，或布尔类型的数据，或数值类型的数据，该自定义属性需要使用绑定属性</li>
</ul>
</li>
</ol>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">template</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">id</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"temp"</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">h1</span>&gt;</span>{{msg}}<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">h1</span>&gt;</span>
        <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">&lt;!-- 父组件调用子组件的位置 --&gt;</span>
        <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">&lt;!-- 父组件在调用子组件的位置，添加一个自定义属性，属性的值就是父组件传入子组件的值。 --&gt;</span>
        <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">&lt;!-- 如果属性值是一个变量，或布尔类型的数据，或数值类型的数据，该自定义属性需要使用绑定属性 --&gt;</span>

        <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">&lt;!-- a的值为：字符串aaa --&gt;</span>
        <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">&lt;!-- b的值为：字符串10 --&gt;</span>
        <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">&lt;!-- c的值为：数值10 ---- 绑定属性--&gt;</span>
        <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">&lt;!-- d的值为：字符false --&gt;</span>
        <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">&lt;!-- flag的值为：布尔true ---- 绑定属性--&gt;</span>
        <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">&lt;!-- pd的值为：变量 ---- 绑定属性--&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">child-com</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">a</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"aaa"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">b</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"10"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">:c</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"10"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">d</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"false"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">:flag</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"true"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">:pd</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"parentData"</span>&gt;</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">child-com</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">template</span>&gt;</span>
</code></pre>
<ol start="2" style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal;">
<li style="line-height: 160%; box-sizing: content-box;">子组件接收
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">在子组件定义的位置，添加一个<code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">props</code>选项</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">选项的值默认是一个<strong style="line-height: 160%; box-sizing: content-box; font-weight: 700;">数组</strong>，数组的元素就是：父组件在调用子组件的位置定义的属性名</li>
</ul>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> child = {
    <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">template</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"#child"</span>,
    <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">props</span>: [<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"a"</span>, <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"b"</span>, <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"c"</span>, <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"d"</span>, <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"flag"</span>, <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"pd"</span>],
    data() {
        <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">return</span> {
            <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">msg</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"hello child-temp"</span>
        }
    }
}
</code></pre>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">这样就可以在子组件中通过自定义属性名访问父组件传入的数据了</li>
</ul>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">template</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">id</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"child"</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">h2</span>&gt;</span>{{msg}}<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">h2</span>&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">p</span>&gt;</span>a的值为：{{a}}，a的类型为{{typeof a}}<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">p</span>&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">p</span>&gt;</span>b的值为：{{b}}，b的类型为{{typeof b}}<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">p</span>&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">p</span>&gt;</span>c的值为：{{c}}，c的类型为{{typeof c}}<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">p</span>&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">p</span>&gt;</span>d的值为：{{d}}，d的类型为{{typeof d}}<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">p</span>&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">p</span>&gt;</span>flag的值为：{{flag}}，flag的类型为{{typeof flag}}<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">p</span>&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">p</span>&gt;</span>pd的值为：{{pd}}，pd的类型为{{typeof pd}}<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">p</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">template</span>&gt;</span>
</code></pre>
</li>
<li style="line-height: 160%; box-sizing: content-box;"><code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">props</code>选项内接收到的父组件传过来的数据，可以进行一些自定义配置。
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">首先将<code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">props</code>的值改为<strong style="line-height: 160%; box-sizing: content-box; font-weight: 700;">对象</strong>，对象的key：自定义的属性名，对象的value：对象</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">这个对象就是当前接收到数据的<strong style="line-height: 160%; box-sizing: content-box; font-weight: 700;">配置对象</strong></li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">配置选项有：
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;"><code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">type</code>：数据类型</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;"><code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">default</code>：默认数据</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;"><code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">required</code>：当前数据为必传数据</li>
</ul>
</li>
</ul>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;">props: {
    <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">num</span>: {
        <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">type</span>: <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">Number</span>,
        <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">default</span>: <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">123</span>,
        <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">required</span>: <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">true</span>
    },
}
</code></pre>
</li>
</ol>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">(二) 子组件给父组件传值</h5>
<ol style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal;">
<li style="line-height: 160%; box-sizing: content-box;">父组件在调用子组件的位置，绑定自定义事件。事件的名字不能是关键字，保留字及固有的事件名称...</li>
<li style="line-height: 160%; box-sizing: content-box;">该事件的处理方法，由父组件定义。方法接收的参数，为子组件发送的数据</li>
<li style="line-height: 160%; box-sizing: content-box;">在子组件的某个事件或行为中，使用<code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">this.$emit</code>触发自定义事件，并且传递参数（数据）</li>
</ol>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">body</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">id</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"app"</span>&gt;</span>
        {{msg}}
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">my-com</span>&gt;</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">my-com</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">body</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">src</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"libs/vue.js"</span>&gt;</span><span style="line-height: 160%; box-sizing: content-box;"/><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span>

<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">template</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">id</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"temp"</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">h1</span>&gt;</span>{{msg}}<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">h1</span>&gt;</span>
        <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">&lt;!-- 1.父组件在调用子组件的位置，绑定自定义事件 --&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">child-com</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">v-on:myeve</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"getData"</span>&gt;</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">child-com</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">template</span>&gt;</span>

<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">template</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">id</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"child"</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">h2</span>&gt;</span>{{msg}}<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">h2</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">template</span>&gt;</span>

<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span><span style="line-height: 160%; box-sizing: content-box;">
    <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> child = {
        <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">template</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"#child"</span>,
        data() {
            <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">return</span> {
                <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">msg</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"hello child-temp"</span>
            }
        },
        created() {
            <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 3. 相应的子组件触发对应的自定义事件</span>
            <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">this</span>.$emit(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'myeve'</span>, <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">this</span>.msg);
        }
    }
    <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> com = {
        <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">template</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"#temp"</span>,
        data() {
            <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">return</span> {
                <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">msg</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"helle temp"</span>,
                <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">parentData</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"this is parent data"</span>
            }
        },
        <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">components</span>: {
            <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"child-com"</span>: child
        },
        <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">methods</span>: {
            <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 2.父组件中定义 自定义事件的处理函数，参数为子组件传过来的数据</span>
            getData(res){
                <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">console</span>.log(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"子组件发过来的数据为："</span>, res);
            }
        },
    }

    <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> vm = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> Vue({
        <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">el</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"#app"</span>,
        <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">data</span>: {
            <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">msg</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"hello vue"</span>
        },
        <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">components</span>: {
            <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"my-com"</span>: com,
        }
    })
</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span>
</code></pre>
<h3 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 27px; color: #333;">2. 兄弟组件 - 传值</h3>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">非父子组件，就是兄弟组件，兄弟组件之间并无任何关系，如果需要传值，需要借助中间方，如：
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">租客 ==&gt; <strong style="line-height: 160%; box-sizing: content-box; font-weight: 700;">中介</strong> ==&gt; 房东</li>
</ul>
</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">使用 中央事件总线 ，其实就是一个新的vue实例传值</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">接收数据的一方，通过 <code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">$on</code> 先监听自定义事件，并接收值</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">发送数据的一方，通过 <code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">$emit</code> 触发事件，并传值</li>
</ul>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">body</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">id</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"app"</span>&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">my-nav</span>&gt;</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">my-nav</span>&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">my-cont</span>&gt;</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">my-cont</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">body</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">src</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"libs/vue.js"</span>&gt;</span><span style="line-height: 160%; box-sizing: content-box;"/><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">template</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">id</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"nav"</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">ul</span>&gt;</span>
            <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">li</span> @<span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">click</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"sendData('手机')"</span>&gt;</span>手机<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">li</span>&gt;</span>
            <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">li</span> @<span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">click</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"sendData('电脑')"</span>&gt;</span>电脑<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">li</span>&gt;</span>
            <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">li</span> @<span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">click</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"sendData('音箱')"</span>&gt;</span>音箱<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">li</span>&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">ul</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">template</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">template</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">id</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"cont"</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>这里是{{tit}}主场<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">template</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span><span style="line-height: 160%; box-sizing: content-box;">
    <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 1.使用 中央事件总线 ，其实就是一个新的vue实例传值</span>
    <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> bus = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> Vue();
    <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> Nav = {
        template: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"#nav"</span>,
        methods: {
            sendData(i) {
                <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 3. 发送数据的一方，触发事件，并传值</span>
                bus.$emit(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"titData"</span>, i);
            }
        },
    }
    <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> Cont = {
        template: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"#cont"</span>,
        data() {
            <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">return</span> {
                tit: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"手机"</span>
            }
        },
        created() {
            <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 2.接收数据的一方，监听自定义事件，并接收值</span>
            bus.$on(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"titData"</span>, (res) =&gt; {
                <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">this</span>.tit = res;
            })
        },
    }

    <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> vm = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> Vue({
        el: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"#app"</span>,
        components: {
            <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"my-nav"</span>: Nav,
            <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"my-cont"</span>: Cont,
        }
    })
</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span>
</code></pre>
<h3 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 27px; color: #333;">3. 子组件使用父组件的方法和数据</h3>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">在子组件中可以直接通过 <code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">$parent</code> 拿到父组件的实例，从而访问父组件的方法或数据</li>
</ul>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;">&lt;template &gt;
    &lt;div&gt;
        &lt;h2&gt;子组件中的数据：{{msg}}&lt;/h2&gt;
        &lt;p&gt;子组件拿到的父组件的数据：{{$parent.msg}}&lt;/p
    &lt;/div&gt;
&lt;/template&gt;
</code></pre>
<h3 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 27px; color: #333;">4. 父组件使用子组件的方法和数据</h3>
<ol style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal;">
<li style="line-height: 160%; box-sizing: content-box;">在子组件的调用处，使用自定义属性<code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">ref</code>添加子组件别名</li>
</ol>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">template</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">id</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"temp"</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">h1</span>&gt;</span>{{msg}}<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">h1</span>&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">input</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">type</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"button"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">value</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"获取子组件数据"</span> @<span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">click</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"getData"</span>&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">p</span>&gt;</span>父组件拿到的子组件的数据：{{ childMsg }}<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">p</span>&gt;</span>
        <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">&lt;!-- 1.在子组件的调用处，使用自定义属性`ref`添加子组件别名 --&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">child-com</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">ref</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"test"</span>&gt;</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">child-com</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">template</span>&gt;</span>
</code></pre>
<ol start="2" style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal;">
<li style="line-height: 160%; box-sizing: content-box;">在父组件中，使用 <code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">this.$refs.子组件别名</code> 获取到子组件实例，从而访问子组件的数据和方法</li>
</ol>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> com = {
    <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">template</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"#temp"</span>,
    data() {
        <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">return</span> {
            <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">msg</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"hello parent-temp"</span>,
            <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">childMsg</span>:<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">""</span>
        }
    },
    <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">components</span>: {
        <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"child-com"</span>: child
    },
    <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">methods</span>: {
        getData(){
            <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 2. 在父组件中，使用 `this.$refs.子组件别名` 获取到子组件实例，从而访问子组件的数据和方法</span>
            <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">this</span>.childMsg = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">this</span>.$refs.test.msg;
        }
    }
}
</code></pre>
<h1 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 41px; border-bottom: 3px double #999; color: #000;">五、provide + inject</h1>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">provide 和 inject 主要在开发高阶插件/组件库时使用。并不推荐用于普通应用程序代码中。</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">用于一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">provide 选项是一个对象</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">inject 选项是一个字符串数组</li>
</ul>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 父级组件提供 'foo'</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">var</span> Provider = {
  <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">provide</span>: {
    <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">foo</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'bar'</span>
  },
  <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// ...</span>
}

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 子组件注入 'foo'</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">var</span> Child = {
  <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">inject</span>: [<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'foo'</span>],
  created () {
    <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">console</span>.log(<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">this</span>.foo) <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// =&gt; "bar"</span>
  }
  <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// ...</span>
}
</code></pre>
</div><center style="display:none !important;visibility:collapse !important;height:0 !important;white-space:nowrap;width:100%;overflow:hidden">%5Btoc%5D%0A%23%20%E4%B8%80%E3%80%81%E7%BB%84%E4%BB%B6%E7%9A%84%E6%A6%82%E5%BF%B5%0A%23%23%23%201.%20%E7%BB%84%E4%BB%B6%0A-%20%E7%BB%84%E4%BB%B6%EF%BC%8C%E6%98%AF%E5%AF%B9%E6%95%B0%E6%8D%AE%E5%92%8C%E6%96%B9%E6%B3%95%E7%9A%84%E7%AE%80%E5%8D%95%E5%B0%81%E8%A3%85%E3%80%82%E7%BB%84%E4%BB%B6%E5%8F%AF%E4%BB%A5%E6%9C%89%E8%87%AA%E5%B7%B1%E7%9A%84%E5%B1%9E%E6%80%A7%E5%92%8C%E6%96%B9%E6%B3%95%E3%80%82%E5%B1%9E%E6%80%A7%E6%98%AF%E7%BB%84%E4%BB%B6%E6%95%B0%E6%8D%AE%E7%9A%84%E7%AE%80%E5%8D%95%E8%AE%BF%E9%97%AE%E8%80%85%E3%80%82%E6%96%B9%E6%B3%95%E5%88%99%E6%98%AF%E7%BB%84%E4%BB%B6%E7%9A%84%E4%B8%80%E4%BA%9B%E7%AE%80%E5%8D%95%E8%80%8C%E5%8F%AF%E8%A7%81%E7%9A%84%E5%8A%9F%E8%83%BD%E3%80%82%0A-%20%E4%BD%BF%E7%94%A8%E7%BB%84%E4%BB%B6%E5%8F%AF%E4%BB%A5%E5%AE%9E%E7%8E%B0**%E6%8B%96%E6%94%BE%E5%BC%8F%E7%BC%96%E7%A8%8B**%E3%80%81**%E5%BF%AB%E9%80%9F%E7%9A%84%E5%B1%9E%E6%80%A7%E5%A4%84%E7%90%86**%E4%BB%A5%E5%8F%8A**%E7%9C%9F%E6%AD%A3%E7%9A%84%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1**%E7%9A%84%E8%AE%BE%E8%AE%A1%E3%80%82%0A%0A%23%23%23%202.%20vue%E4%B8%AD%E7%9A%84%E7%BB%84%E4%BB%B6%0A-%20%E7%BB%84%E4%BB%B6%EF%BC%88Component%EF%BC%89%E6%98%AF%20Vue.js%20%E6%9C%80%E5%BC%BA%E5%A4%A7%E7%9A%84%E5%8A%9F%E8%83%BD%E4%B9%8B%E4%B8%80%E3%80%82%0A-%20%E7%BB%84%E4%BB%B6%E5%8F%AF%E4%BB%A5%E6%89%A9%E5%B1%95%20HTML%20%E5%85%83%E7%B4%A0%EF%BC%8C%E5%B0%81%E8%A3%85%E5%8F%AF%E9%87%8D%E7%94%A8%E7%9A%84%E4%BB%A3%E7%A0%81%E3%80%82%0A-%20%E7%BB%84%E4%BB%B6%E7%B3%BB%E7%BB%9F%E8%AE%A9%E6%88%91%E4%BB%AC%E5%8F%AF%E4%BB%A5%E7%94%A8%E7%8B%AC%E7%AB%8B%E5%8F%AF%E5%A4%8D%E7%94%A8%E7%9A%84%E5%B0%8F%E7%BB%84%E4%BB%B6%E6%9D%A5%E6%9E%84%E5%BB%BA%E5%A4%A7%E5%9E%8B%E5%BA%94%E7%94%A8%EF%BC%8C%E5%87%A0%E4%B9%8E%E4%BB%BB%E6%84%8F%E7%B1%BB%E5%9E%8B%E7%9A%84%E5%BA%94%E7%94%A8%E7%9A%84%E7%95%8C%E9%9D%A2%E9%83%BD%E5%8F%AF%E4%BB%A5%E6%8A%BD%E8%B1%A1%E4%B8%BA%E4%B8%80%E4%B8%AA%E7%BB%84%E4%BB%B6%E6%A0%91%EF%BC%9A%0A!%5Bc7b535e898bc597be0098040c2402f8b.png%5D(evernotecid%3A%2F%2FBB210BE9-3A02-4842-A4C9-7970C5C1E576%2Fappyinxiangcom%2F16639017%2FENResource%2Fp718)%0A-%20%E7%BB%84%E4%BB%B6%E5%8C%96%E5%BC%80%E5%8F%91%EF%BC%8C%E7%B1%BB%E4%BC%BC%E4%BA%8E%E6%A8%A1%E5%9D%97%E5%8C%96%E5%BC%80%E5%8F%91%EF%BC%8C%E4%BD%86%E5%B9%B6%E4%B8%8D%E7%AD%89%E5%90%8C%E4%BA%8E%E6%A8%A1%E5%9D%97%E5%8C%96%E5%BC%80%E5%8F%91%E3%80%82%0A%20%20%20%20-%20%E7%BB%84%E4%BB%B6%E5%8C%96%E5%BC%80%E5%8F%91%EF%BC%8C%E5%8C%85%E6%8B%AC%E9%A1%B5%E9%9D%A2%EF%BC%8C%E6%A0%B7%E5%BC%8F%EF%BC%8C%E8%A1%8C%E4%B8%BA%EF%BC%88%E4%B8%9A%E5%8A%A1%E9%80%BB%E8%BE%91%EF%BC%89%0A%20%20%20%20-%20%E6%A8%A1%E5%9D%97%E5%8C%96%E5%BC%80%E5%8F%91%EF%BC%8C%E5%8F%AA%E5%8C%85%E6%8B%AC%E8%A1%8C%E4%B8%BA%EF%BC%88%E4%B8%9A%E5%8A%A1%E9%80%BB%E8%BE%91%EF%BC%89%0A-%20vue%E4%B8%AD%E7%9A%84%E7%BB%84%E4%BB%B6%E5%88%86%E4%B8%BA**%E5%85%A8%E5%B1%80%E6%B3%A8%E5%86%8C%E7%BB%84%E4%BB%B6**%E5%92%8C**%E5%B1%80%E9%83%A8%E6%B3%A8%E5%86%8C%E7%BB%84%E4%BB%B6**%0A%20%20%20%20-%20%E7%BB%84%E4%BB%B6%E6%98%AF%E7%89%B9%E6%AE%8A%E7%9A%84%E5%AE%9E%E4%BE%8B%0A%20%20%20%20-%20%E7%BB%84%E4%BB%B6%E9%80%89%E9%A1%B9%E5%92%8C%E5%AE%9E%E4%BE%8B%E9%80%89%E9%A1%B9%E5%9F%BA%E6%9C%AC%E4%BF%9D%E6%8C%81%E4%B8%80%E8%87%B4%0A%20%20%20%20-%20%E7%BB%84%E4%BB%B6%E6%B2%A1%E6%9C%89el%E9%80%89%E9%A1%B9%EF%BC%8C%E6%9C%89template%E9%80%89%E9%A1%B9%0A%20%20%20%20%20%20%20%20-%20template%E5%8F%AF%E4%BB%A5%E6%98%AF%E4%B8%80%E6%AE%B5html%E4%BB%A3%E7%A0%81%EF%BC%8C%E4%B9%9F%E5%8F%AF%E4%BB%A5%E7%9B%B4%E6%8E%A5%E6%8C%87%E5%90%91%E9%A1%B5%E9%9D%A2%E6%A8%A1%E6%9D%BF%EF%BC%8C%E7%B1%BB%E4%BC%BC%E4%BA%8Eel%E9%80%89%E9%A1%B9%0A%20%20%20%20-%20%E7%BB%84%E4%BB%B6%E7%9A%84data%E9%80%89%E9%A1%B9%E5%BF%85%E9%A1%BB%E6%98%AF%E4%B8%80%E4%B8%AA%E5%87%BD%E6%95%B0%EF%BC%8C%E8%BF%94%E5%9B%9E%E4%B8%80%E4%B8%AA%E5%AF%B9%E8%B1%A1%0A%20%20%20%20%20%20%20%20-%20%E7%BB%84%E4%BB%B6%E6%B8%B2%E6%9F%93%E6%97%B6%EF%BC%8C%E6%95%B0%E6%8D%AE%E4%BC%9A%E6%9C%89%E4%BD%9C%E7%94%A8%E5%9F%9F%EF%BC%8C%E5%A6%82%E6%9E%9C%E8%87%AA%E8%BA%AB%E6%B2%A1%E6%9C%89%E5%AE%9A%E4%B9%89%EF%BC%8C%E5%88%99%E4%B8%8D%E4%BC%9A%E6%B8%B2%E6%9F%93(%E6%95%B0%E6%8D%AE%E4%B9%9F%E5%8F%AF%E4%BB%A5%E7%94%B1%E4%B8%8A%E7%BA%A7%E4%BC%A0%E9%80%92%20-%20%E7%BB%84%E4%BB%B6%E4%B9%8B%E9%97%B4%E7%9A%84%E4%BC%A0%E5%80%BC)%0A%0A%23%20%E4%BA%8C%E3%80%81%E5%85%A8%E5%B1%80%E6%B3%A8%E5%86%8C%E7%BB%84%E4%BB%B6%0A-%20vue%E5%AE%9E%E4%BE%8B%E5%88%9B%E5%BB%BA%E4%B9%8B%E5%89%8D%0A%60%60%60html%0A%3Cbody%3E%0A%20%20%20%20%3Cdiv%20id%3D%22app%22%3E%0A%20%20%20%20%20%20%20%20%7B%7Bmsg%7D%7D%0A%20%20%20%20%20%20%20%20%3Chello-temp%3E%3C%2Fhello-temp%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%3C%2Fbody%3E%0A%3Cscript%20src%3D%22libs%2Fvue.js%22%3E%3C%2Fscript%3E%0A%3Cscript%3E%0A%20%20%20%20Vue.component('hello-temp'%2C%20%7B%0A%20%20%20%20%20%20%20%20template%3A%20%60%3Cdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ch1%3E%7B%7Bmsg%7D%7D%3C%2Fh1%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%60%2C%0A%20%20%20%20%20%20%20%20data%3A%20function%20()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20msg%3A%20%22hello%20vue%20temp%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D)%3B%0A%20%20%20%20const%20vm%20%3D%20new%20Vue(%7B%0A%20%20%20%20%20%20%20%20el%3A%20%22%23app%22%2C%0A%20%20%20%20%20%20%20%20data%3A%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20msg%3A%22hello%20vue%22%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D)%0A%3C%2Fscript%3E%0A%60%60%60%0A-%20%E4%BD%86%E6%98%AF%E4%BB%A5%E4%B8%8A%E6%A1%88%E4%BE%8B%E5%B9%B6%E4%B8%8D%E6%8E%A8%E8%8D%90%E4%BD%BF%E7%94%A8%EF%BC%8C%E5%9B%A0%E4%B8%BA%E5%9C%A8js%E7%9A%84%E5%AD%97%E7%AC%A6%E4%B8%AD%E4%B9%A6%E5%86%99html%E4%BB%A3%E7%A0%81%EF%BC%8C%E4%B8%8D%E4%BC%9A%E8%87%AA%E5%8A%A8%E8%BF%9B%E8%A1%8C%E8%AF%AD%E6%B3%95%E6%A3%80%E6%9F%A5%EF%BC%8C%E4%B8%8D%E6%96%B9%E4%BE%BF%E4%B9%A6%E5%86%99%EF%BC%8C%E4%B9%9F%E4%B8%8D%E6%96%B9%E4%BE%BF%E8%B0%83%E8%AF%95%0A%0A------%0A%0A-%20%E5%BB%BA%E8%AE%AE%E4%BD%BF%E7%94%A8vue%E6%8F%90%E4%BE%9B%E7%9A%84template%E6%A0%87%E7%AD%BE%EF%BC%8C%E5%88%9B%E5%BB%BA%E6%A8%A1%E6%9D%BF%EF%BC%8C%E7%84%B6%E5%90%8E%E5%86%8D%E6%B3%A8%E5%86%8C%E5%88%B0%E7%BB%84%E4%BB%B6%0A%60%60%60html%0A%3Cbody%3E%0A%20%20%20%20%3Cdiv%20id%3D%22app%22%3E%0A%20%20%20%20%20%20%20%20%7B%7Bmsg%7D%7D%0A%20%20%20%20%20%20%20%20%3C!--%203.%E4%BD%BF%E7%94%A8%E7%BB%84%E4%BB%B6%20--%3E%0A%20%20%20%20%20%20%20%20%3Chello-temp%3E%3C%2Fhello-temp%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%3C%2Fbody%3E%0A%3Cscript%20src%3D%22libs%2Fvue.js%22%3E%3C%2Fscript%3E%0A%3C!--%201.%E5%88%9B%E5%BB%BA%E7%BB%84%E4%BB%B6%E6%A8%A1%E6%9D%BF%20--%3E%0A%3Ctemplate%20id%3D%22temp%22%3E%0A%20%20%20%20%3Cdiv%3E%0A%20%20%20%20%20%20%20%20%3Ch1%3E%7B%7Bmsg%7D%7D%3C%2Fh1%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%3C%2Ftemplate%3E%0A%3Cscript%3E%0A%20%20%20%20%2F%2F%202.%E6%B3%A8%E5%86%8C%E7%BB%84%E4%BB%B6%0A%20%20%20%20Vue.component('hello-temp'%2C%20%7B%0A%20%20%20%20%20%20%20%20template%3A%20%22%23temp%22%2C%0A%20%20%20%20%20%20%20%20data%3A%20function%20()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20msg%3A%20%22hello%20vue%20temp%202%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D)%3B%0A%20%20%20%20const%20vm%20%3D%20new%20Vue(%7B%0A%20%20%20%20%20%20%20%20el%3A%20%22%23app%22%2C%0A%20%20%20%20%20%20%20%20data%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20msg%3A%20%22hello%20vue%22%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D)%0A%3C%2Fscript%3E%0A%60%60%60%0A%0A%0A%0A%23%20%E4%B8%89%E3%80%81%E5%B1%80%E9%83%A8%E6%B3%A8%E5%86%8C%E7%BB%84%E4%BB%B6%0A-%20vue%E5%AE%9E%E4%BE%8B%E5%86%85%E9%83%A8%E9%80%89%E9%A1%B9%0A%60%60%60html%0A%3Cbody%3E%0A%20%20%20%20%3Cdiv%20id%3D%22app%22%3E%0A%20%20%20%20%20%20%20%20%7B%7Bmsg%7D%7D%0A%20%20%20%20%20%20%20%20%3C!--%204.%E4%BD%BF%E7%94%A8%E7%BB%84%E4%BB%B6%20--%3E%0A%20%20%20%20%20%20%20%20%3Cmy-com%3E%3C%2Fmy-com%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%3C%2Fbody%3E%0A%3Cscript%20src%3D%22libs%2Fvue.js%22%3E%3C%2Fscript%3E%0A%3C!--%201.%E5%88%9B%E5%BB%BA%E7%BB%84%E4%BB%B6%E6%A8%A1%E6%9D%BF%20--%3E%0A%3Ctemplate%20id%3D%22temp%22%3E%0A%20%20%20%20%3Cdiv%3E%0A%20%20%20%20%20%20%20%20%3Ch1%3E%7B%7Bmsg%7D%7D%3C%2Fh1%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%3C%2Ftemplate%3E%0A%3Cscript%3E%0A%20%20%20%20%2F%2F%202.%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%0A%20%20%20%20const%20com%20%3D%20%7B%0A%20%20%20%20%20%20%20%20template%3A%20%22%23temp%22%2C%0A%20%20%20%20%20%20%20%20data()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20msg%3A%20%22helle%20temp%203%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%0A%20%20%20%20const%20vm%20%3D%20new%20Vue(%7B%0A%20%20%20%20%20%20%20%20el%3A%20%22%23app%22%2C%0A%20%20%20%20%20%20%20%20data%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20msg%3A%20%22hello%20vue%22%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20components%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%203.%E6%B3%A8%E5%86%8C%E5%B1%80%E9%83%A8%E7%BB%84%E4%BB%B6%EF%BC%8C%E8%B0%81%E6%B3%A8%E5%86%8C%E8%B0%81%E4%BD%BF%E7%94%A8%EF%BC%81%0A%20%20%20%20%20%20%20%20%20%20%20%20%22my-com%22%3A%20com%2C%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D)%0A%3C%2Fscript%3E%0A%60%60%60%0A%0A%23%20%E5%9B%9B%E3%80%81%E7%BB%84%E4%BB%B6%E4%B9%8B%E9%97%B4%E7%9A%84%E5%85%B3%E7%B3%BB%0A%0A%23%23%23%201.%20%E7%88%B6%E5%AD%90%E7%BB%84%E4%BB%B6%0A%23%23%23%23%20%E7%BB%84%E4%BB%B6%E7%9A%84%E5%B5%8C%E5%A5%97%0A%60%60%60html%0A%3Cbody%3E%0A%20%20%20%20%3Cdiv%20id%3D%22app%22%3E%0A%20%20%20%20%20%20%20%20%7B%7Bmsg%7D%7D%0A%20%20%20%20%20%20%20%20%3C!--%207.%E4%BD%BF%E7%94%A8%E7%88%B6%E7%BB%84%E4%BB%B6%20--%3E%0A%20%20%20%20%20%20%20%20%3Cmy-com%3E%3C%2Fmy-com%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%3C%2Fbody%3E%0A%3Cscript%20src%3D%22libs%2Fvue.js%22%3E%3C%2Fscript%3E%0A%3C!--%201.%E5%88%9B%E5%BB%BA%E7%88%B6%E7%BB%84%E4%BB%B6%E6%A8%A1%E6%9D%BF%20--%3E%0A%3Ctemplate%20id%3D%22temp%22%3E%0A%20%20%20%20%3Cdiv%3E%0A%20%20%20%20%20%20%20%20%3Ch1%3E%7B%7Bmsg%7D%7D%3C%2Fh1%3E%0A%20%20%20%20%20%20%20%20%3C!--%208.%E4%BD%BF%E7%94%A8%E5%AD%90%E7%BB%84%E4%BB%B6%20--%3E%0A%20%20%20%20%20%20%20%20%3Cchild-com%3E%3C%2Fchild-com%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%3C%2Ftemplate%3E%0A%3C!--%202.%E5%88%9B%E5%BB%BA%E5%AD%90%E7%BB%84%E4%BB%B6%E6%A8%A1%E6%9D%BF%20--%3E%0A%3Ctemplate%20id%3D%22child%22%3E%0A%20%20%20%20%3Cdiv%3E%0A%20%20%20%20%20%20%20%20%3Ch2%3E%7B%7Bmsg%7D%7D%3C%2Fh2%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%3C%2Ftemplate%3E%0A%0A%3Cscript%3E%0A%20%20%20%20%2F%2F%203.%E5%AE%9A%E4%B9%89%E5%AD%90%E7%BB%84%E4%BB%B6%0A%20%20%20%20const%20child%20%3D%20%7B%0A%20%20%20%20%20%20%20%20template%3A%20%22%23child%22%2C%0A%20%20%20%20%20%20%20%20data()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20msg%3A%20%22hello%20child-temp%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%20%20%2F%2F%204.%E5%AE%9A%E4%B9%89%E7%88%B6%E7%BB%84%E4%BB%B6%0A%20%20%20%20const%20com%20%3D%20%7B%0A%20%20%20%20%20%20%20%20template%3A%20%22%23temp%22%2C%0A%20%20%20%20%20%20%20%20data()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20msg%3A%20%22helle%20temp%203%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20components%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%206.%E6%B3%A8%E5%86%8C%E5%B1%80%E9%83%A8%E7%BB%84%E4%BB%B6(%E5%AD%90%E7%BB%84%E4%BB%B6)%EF%BC%8C%E8%B0%81%E6%B3%A8%E5%86%8C%E8%B0%81%E4%BD%BF%E7%94%A8%EF%BC%81%0A%20%20%20%20%20%20%20%20%20%20%20%20%22child-com%22%3A%20child%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%0A%20%20%20%20const%20vm%20%3D%20new%20Vue(%7B%0A%20%20%20%20%20%20%20%20el%3A%20%22%23app%22%2C%0A%20%20%20%20%20%20%20%20data%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20msg%3A%20%22hello%20vue%22%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20components%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%205.%E6%B3%A8%E5%86%8C%E5%B1%80%E9%83%A8%E7%BB%84%E4%BB%B6(%E7%88%B6%E7%BB%84%E4%BB%B6)%EF%BC%8C%E8%B0%81%E6%B3%A8%E5%86%8C%E8%B0%81%E4%BD%BF%E7%94%A8%EF%BC%81%0A%20%20%20%20%20%20%20%20%20%20%20%20%22my-com%22%3A%20com%2C%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D)%0A%3C%2Fscript%3E%0A%60%60%60%0A%0A%23%23%23%23%20**%E7%88%B6%E5%AD%90%E7%BB%84%E4%BB%B6%E7%9A%84%E4%BC%A0%E5%80%BC**%20-%20**%E9%9D%9E%E5%B8%B8%E9%87%8D%E8%A6%81**%0A%23%23%23%23%23%20(%E4%B8%80)%20%E7%88%B6%E7%BB%84%E4%BB%B6%E7%BB%99%E5%AD%90%E7%BB%84%E4%BB%B6%E4%BC%A0%E5%80%BC%0A1.%20%E7%88%B6%E7%BB%84%E4%BB%B6%E4%BC%A0%E9%80%92%0A%20%20%20%20-%20%E7%88%B6%E7%BB%84%E4%BB%B6%E5%9C%A8%E8%B0%83%E7%94%A8%E5%AD%90%E7%BB%84%E4%BB%B6%E7%9A%84%E4%BD%8D%E7%BD%AE%EF%BC%8C%E6%B7%BB%E5%8A%A0%E4%B8%80%E4%B8%AA%E8%87%AA%E5%AE%9A%E4%B9%89%E5%B1%9E%E6%80%A7%EF%BC%8C%E5%B1%9E%E6%80%A7%E7%9A%84%E5%80%BC%E5%B0%B1%E6%98%AF%E7%88%B6%E7%BB%84%E4%BB%B6%E4%BC%A0%E5%85%A5%E5%AD%90%E7%BB%84%E4%BB%B6%E7%9A%84%E5%80%BC%E3%80%82%0A%20%20%20%20-%20%E5%A6%82%E6%9E%9C%E5%B1%9E%E6%80%A7%E5%80%BC%E6%98%AF%E4%B8%80%E4%B8%AA%E5%8F%98%E9%87%8F%EF%BC%8C%E6%88%96%E5%B8%83%E5%B0%94%E7%B1%BB%E5%9E%8B%E7%9A%84%E6%95%B0%E6%8D%AE%EF%BC%8C%E6%88%96%E6%95%B0%E5%80%BC%E7%B1%BB%E5%9E%8B%E7%9A%84%E6%95%B0%E6%8D%AE%EF%BC%8C%E8%AF%A5%E8%87%AA%E5%AE%9A%E4%B9%89%E5%B1%9E%E6%80%A7%E9%9C%80%E8%A6%81%E4%BD%BF%E7%94%A8%E7%BB%91%E5%AE%9A%E5%B1%9E%E6%80%A7%0A%60%60%60html%0A%3Ctemplate%20id%3D%22temp%22%3E%0A%20%20%20%20%3Cdiv%3E%0A%20%20%20%20%20%20%20%20%3Ch1%3E%7B%7Bmsg%7D%7D%3C%2Fh1%3E%0A%20%20%20%20%20%20%20%20%3C!--%20%E7%88%B6%E7%BB%84%E4%BB%B6%E8%B0%83%E7%94%A8%E5%AD%90%E7%BB%84%E4%BB%B6%E7%9A%84%E4%BD%8D%E7%BD%AE%20--%3E%0A%20%20%20%20%20%20%20%20%3C!--%20%E7%88%B6%E7%BB%84%E4%BB%B6%E5%9C%A8%E8%B0%83%E7%94%A8%E5%AD%90%E7%BB%84%E4%BB%B6%E7%9A%84%E4%BD%8D%E7%BD%AE%EF%BC%8C%E6%B7%BB%E5%8A%A0%E4%B8%80%E4%B8%AA%E8%87%AA%E5%AE%9A%E4%B9%89%E5%B1%9E%E6%80%A7%EF%BC%8C%E5%B1%9E%E6%80%A7%E7%9A%84%E5%80%BC%E5%B0%B1%E6%98%AF%E7%88%B6%E7%BB%84%E4%BB%B6%E4%BC%A0%E5%85%A5%E5%AD%90%E7%BB%84%E4%BB%B6%E7%9A%84%E5%80%BC%E3%80%82%20--%3E%0A%20%20%20%20%20%20%20%20%3C!--%20%E5%A6%82%E6%9E%9C%E5%B1%9E%E6%80%A7%E5%80%BC%E6%98%AF%E4%B8%80%E4%B8%AA%E5%8F%98%E9%87%8F%EF%BC%8C%E6%88%96%E5%B8%83%E5%B0%94%E7%B1%BB%E5%9E%8B%E7%9A%84%E6%95%B0%E6%8D%AE%EF%BC%8C%E6%88%96%E6%95%B0%E5%80%BC%E7%B1%BB%E5%9E%8B%E7%9A%84%E6%95%B0%E6%8D%AE%EF%BC%8C%E8%AF%A5%E8%87%AA%E5%AE%9A%E4%B9%89%E5%B1%9E%E6%80%A7%E9%9C%80%E8%A6%81%E4%BD%BF%E7%94%A8%E7%BB%91%E5%AE%9A%E5%B1%9E%E6%80%A7%20--%3E%0A%0A%20%20%20%20%20%20%20%20%3C!--%20a%E7%9A%84%E5%80%BC%E4%B8%BA%EF%BC%9A%E5%AD%97%E7%AC%A6%E4%B8%B2aaa%20--%3E%0A%20%20%20%20%20%20%20%20%3C!--%20b%E7%9A%84%E5%80%BC%E4%B8%BA%EF%BC%9A%E5%AD%97%E7%AC%A6%E4%B8%B210%20--%3E%0A%20%20%20%20%20%20%20%20%3C!--%20c%E7%9A%84%E5%80%BC%E4%B8%BA%EF%BC%9A%E6%95%B0%E5%80%BC10%20----%20%E7%BB%91%E5%AE%9A%E5%B1%9E%E6%80%A7--%3E%0A%20%20%20%20%20%20%20%20%3C!--%20d%E7%9A%84%E5%80%BC%E4%B8%BA%EF%BC%9A%E5%AD%97%E7%AC%A6false%20--%3E%0A%20%20%20%20%20%20%20%20%3C!--%20flag%E7%9A%84%E5%80%BC%E4%B8%BA%EF%BC%9A%E5%B8%83%E5%B0%94true%20----%20%E7%BB%91%E5%AE%9A%E5%B1%9E%E6%80%A7--%3E%0A%20%20%20%20%20%20%20%20%3C!--%20pd%E7%9A%84%E5%80%BC%E4%B8%BA%EF%BC%9A%E5%8F%98%E9%87%8F%20----%20%E7%BB%91%E5%AE%9A%E5%B1%9E%E6%80%A7--%3E%0A%20%20%20%20%20%20%20%20%3Cchild-com%20a%3D%22aaa%22%20b%3D%2210%22%20%3Ac%3D%2210%22%20d%3D%22false%22%20%3Aflag%3D%22true%22%20%3Apd%3D%22parentData%22%3E%3C%2Fchild-com%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%3C%2Ftemplate%3E%0A%60%60%60%0A2.%20%E5%AD%90%E7%BB%84%E4%BB%B6%E6%8E%A5%E6%94%B6%0A%20%20%20%20-%20%E5%9C%A8%E5%AD%90%E7%BB%84%E4%BB%B6%E5%AE%9A%E4%B9%89%E7%9A%84%E4%BD%8D%E7%BD%AE%EF%BC%8C%E6%B7%BB%E5%8A%A0%E4%B8%80%E4%B8%AA%60props%60%E9%80%89%E9%A1%B9%0A%20%20%20%20-%20%E9%80%89%E9%A1%B9%E7%9A%84%E5%80%BC%E9%BB%98%E8%AE%A4%E6%98%AF%E4%B8%80%E4%B8%AA**%E6%95%B0%E7%BB%84**%EF%BC%8C%E6%95%B0%E7%BB%84%E7%9A%84%E5%85%83%E7%B4%A0%E5%B0%B1%E6%98%AF%EF%BC%9A%E7%88%B6%E7%BB%84%E4%BB%B6%E5%9C%A8%E8%B0%83%E7%94%A8%E5%AD%90%E7%BB%84%E4%BB%B6%E7%9A%84%E4%BD%8D%E7%BD%AE%E5%AE%9A%E4%B9%89%E7%9A%84%E5%B1%9E%E6%80%A7%E5%90%8D%0A%20%20%20%20%60%60%60js%0A%20%20%20%20const%20child%20%3D%20%7B%0A%20%20%20%20%20%20%20%20template%3A%20%22%23child%22%2C%0A%20%20%20%20%20%20%20%20props%3A%20%5B%22a%22%2C%20%22b%22%2C%20%22c%22%2C%20%22d%22%2C%20%22flag%22%2C%20%22pd%22%5D%2C%0A%20%20%20%20%20%20%20%20data()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20msg%3A%20%22hello%20child-temp%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%20%20%60%60%60%0A%20%20%20%20-%20%E8%BF%99%E6%A0%B7%E5%B0%B1%E5%8F%AF%E4%BB%A5%E5%9C%A8%E5%AD%90%E7%BB%84%E4%BB%B6%E4%B8%AD%E9%80%9A%E8%BF%87%E8%87%AA%E5%AE%9A%E4%B9%89%E5%B1%9E%E6%80%A7%E5%90%8D%E8%AE%BF%E9%97%AE%E7%88%B6%E7%BB%84%E4%BB%B6%E4%BC%A0%E5%85%A5%E7%9A%84%E6%95%B0%E6%8D%AE%E4%BA%86%0A%20%20%20%20%60%60%60html%0A%20%20%20%20%3Ctemplate%20id%3D%22child%22%3E%0A%20%20%20%20%20%20%20%20%3Cdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Ch2%3E%7B%7Bmsg%7D%7D%3C%2Fh2%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cp%3Ea%E7%9A%84%E5%80%BC%E4%B8%BA%EF%BC%9A%7B%7Ba%7D%7D%EF%BC%8Ca%E7%9A%84%E7%B1%BB%E5%9E%8B%E4%B8%BA%7B%7Btypeof%20a%7D%7D%3C%2Fp%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cp%3Eb%E7%9A%84%E5%80%BC%E4%B8%BA%EF%BC%9A%7B%7Bb%7D%7D%EF%BC%8Cb%E7%9A%84%E7%B1%BB%E5%9E%8B%E4%B8%BA%7B%7Btypeof%20b%7D%7D%3C%2Fp%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cp%3Ec%E7%9A%84%E5%80%BC%E4%B8%BA%EF%BC%9A%7B%7Bc%7D%7D%EF%BC%8Cc%E7%9A%84%E7%B1%BB%E5%9E%8B%E4%B8%BA%7B%7Btypeof%20c%7D%7D%3C%2Fp%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cp%3Ed%E7%9A%84%E5%80%BC%E4%B8%BA%EF%BC%9A%7B%7Bd%7D%7D%EF%BC%8Cd%E7%9A%84%E7%B1%BB%E5%9E%8B%E4%B8%BA%7B%7Btypeof%20d%7D%7D%3C%2Fp%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cp%3Eflag%E7%9A%84%E5%80%BC%E4%B8%BA%EF%BC%9A%7B%7Bflag%7D%7D%EF%BC%8Cflag%E7%9A%84%E7%B1%BB%E5%9E%8B%E4%B8%BA%7B%7Btypeof%20flag%7D%7D%3C%2Fp%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cp%3Epd%E7%9A%84%E5%80%BC%E4%B8%BA%EF%BC%9A%7B%7Bpd%7D%7D%EF%BC%8Cpd%E7%9A%84%E7%B1%BB%E5%9E%8B%E4%B8%BA%7B%7Btypeof%20pd%7D%7D%3C%2Fp%3E%0A%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%3C%2Ftemplate%3E%0A%20%20%20%20%60%60%60%0A3.%20%60props%60%E9%80%89%E9%A1%B9%E5%86%85%E6%8E%A5%E6%94%B6%E5%88%B0%E7%9A%84%E7%88%B6%E7%BB%84%E4%BB%B6%E4%BC%A0%E8%BF%87%E6%9D%A5%E7%9A%84%E6%95%B0%E6%8D%AE%EF%BC%8C%E5%8F%AF%E4%BB%A5%E8%BF%9B%E8%A1%8C%E4%B8%80%E4%BA%9B%E8%87%AA%E5%AE%9A%E4%B9%89%E9%85%8D%E7%BD%AE%E3%80%82%0A%20%20%20%20-%20%E9%A6%96%E5%85%88%E5%B0%86%60props%60%E7%9A%84%E5%80%BC%E6%94%B9%E4%B8%BA**%E5%AF%B9%E8%B1%A1**%EF%BC%8C%E5%AF%B9%E8%B1%A1%E7%9A%84key%EF%BC%9A%E8%87%AA%E5%AE%9A%E4%B9%89%E7%9A%84%E5%B1%9E%E6%80%A7%E5%90%8D%EF%BC%8C%E5%AF%B9%E8%B1%A1%E7%9A%84value%EF%BC%9A%E5%AF%B9%E8%B1%A1%0A%20%20%20%20-%20%E8%BF%99%E4%B8%AA%E5%AF%B9%E8%B1%A1%E5%B0%B1%E6%98%AF%E5%BD%93%E5%89%8D%E6%8E%A5%E6%94%B6%E5%88%B0%E6%95%B0%E6%8D%AE%E7%9A%84**%E9%85%8D%E7%BD%AE%E5%AF%B9%E8%B1%A1**%0A%20%20%20%20-%20%E9%85%8D%E7%BD%AE%E9%80%89%E9%A1%B9%E6%9C%89%EF%BC%9A%0A%20%20%20%20%20%20%20%20-%20%60type%60%EF%BC%9A%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B%0A%20%20%20%20%20%20%20%20-%20%60default%60%EF%BC%9A%E9%BB%98%E8%AE%A4%E6%95%B0%E6%8D%AE%0A%20%20%20%20%20%20%20%20-%20%60required%60%EF%BC%9A%E5%BD%93%E5%89%8D%E6%95%B0%E6%8D%AE%E4%B8%BA%E5%BF%85%E4%BC%A0%E6%95%B0%E6%8D%AE%0A%20%20%20%20%60%60%60js%0A%20%20%20%20props%3A%20%7B%0A%20%20%20%20%20%20%20%20num%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20type%3A%20Number%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20default%3A%20123%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20required%3A%20true%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%7D%0A%20%20%20%20%60%60%60%0A%0A%23%23%23%23%23%20(%E4%BA%8C)%20%E5%AD%90%E7%BB%84%E4%BB%B6%E7%BB%99%E7%88%B6%E7%BB%84%E4%BB%B6%E4%BC%A0%E5%80%BC%0A1.%20%E7%88%B6%E7%BB%84%E4%BB%B6%E5%9C%A8%E8%B0%83%E7%94%A8%E5%AD%90%E7%BB%84%E4%BB%B6%E7%9A%84%E4%BD%8D%E7%BD%AE%EF%BC%8C%E7%BB%91%E5%AE%9A%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6%E3%80%82%E4%BA%8B%E4%BB%B6%E7%9A%84%E5%90%8D%E5%AD%97%E4%B8%8D%E8%83%BD%E6%98%AF%E5%85%B3%E9%94%AE%E5%AD%97%EF%BC%8C%E4%BF%9D%E7%95%99%E5%AD%97%E5%8F%8A%E5%9B%BA%E6%9C%89%E7%9A%84%E4%BA%8B%E4%BB%B6%E5%90%8D%E7%A7%B0...%0A2.%20%E8%AF%A5%E4%BA%8B%E4%BB%B6%E7%9A%84%E5%A4%84%E7%90%86%E6%96%B9%E6%B3%95%EF%BC%8C%E7%94%B1%E7%88%B6%E7%BB%84%E4%BB%B6%E5%AE%9A%E4%B9%89%E3%80%82%E6%96%B9%E6%B3%95%E6%8E%A5%E6%94%B6%E7%9A%84%E5%8F%82%E6%95%B0%EF%BC%8C%E4%B8%BA%E5%AD%90%E7%BB%84%E4%BB%B6%E5%8F%91%E9%80%81%E7%9A%84%E6%95%B0%E6%8D%AE%0A3.%20%E5%9C%A8%E5%AD%90%E7%BB%84%E4%BB%B6%E7%9A%84%E6%9F%90%E4%B8%AA%E4%BA%8B%E4%BB%B6%E6%88%96%E8%A1%8C%E4%B8%BA%E4%B8%AD%EF%BC%8C%E4%BD%BF%E7%94%A8%60this.%24emit%60%E8%A7%A6%E5%8F%91%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6%EF%BC%8C%E5%B9%B6%E4%B8%94%E4%BC%A0%E9%80%92%E5%8F%82%E6%95%B0%EF%BC%88%E6%95%B0%E6%8D%AE%EF%BC%89%0A%60%60%60html%0A%3Cbody%3E%0A%20%20%20%20%3Cdiv%20id%3D%22app%22%3E%0A%20%20%20%20%20%20%20%20%7B%7Bmsg%7D%7D%0A%20%20%20%20%20%20%20%20%3Cmy-com%3E%3C%2Fmy-com%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%3C%2Fbody%3E%0A%3Cscript%20src%3D%22libs%2Fvue.js%22%3E%3C%2Fscript%3E%0A%0A%3Ctemplate%20id%3D%22temp%22%3E%0A%20%20%20%20%3Cdiv%3E%0A%20%20%20%20%20%20%20%20%3Ch1%3E%7B%7Bmsg%7D%7D%3C%2Fh1%3E%0A%20%20%20%20%20%20%20%20%3C!--%201.%E7%88%B6%E7%BB%84%E4%BB%B6%E5%9C%A8%E8%B0%83%E7%94%A8%E5%AD%90%E7%BB%84%E4%BB%B6%E7%9A%84%E4%BD%8D%E7%BD%AE%EF%BC%8C%E7%BB%91%E5%AE%9A%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6%20--%3E%0A%20%20%20%20%20%20%20%20%3Cchild-com%20v-on%3Amyeve%3D%22getData%22%3E%3C%2Fchild-com%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%3C%2Ftemplate%3E%0A%0A%3Ctemplate%20id%3D%22child%22%3E%0A%20%20%20%20%3Cdiv%3E%0A%20%20%20%20%20%20%20%20%3Ch2%3E%7B%7Bmsg%7D%7D%3C%2Fh2%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%3C%2Ftemplate%3E%0A%0A%3Cscript%3E%0A%20%20%20%20const%20child%20%3D%20%7B%0A%20%20%20%20%20%20%20%20template%3A%20%22%23child%22%2C%0A%20%20%20%20%20%20%20%20data()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20msg%3A%20%22hello%20child-temp%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20created()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%203.%20%E7%9B%B8%E5%BA%94%E7%9A%84%E5%AD%90%E7%BB%84%E4%BB%B6%E8%A7%A6%E5%8F%91%E5%AF%B9%E5%BA%94%E7%9A%84%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6%0A%20%20%20%20%20%20%20%20%20%20%20%20this.%24emit('myeve'%2C%20this.msg)%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%20%20const%20com%20%3D%20%7B%0A%20%20%20%20%20%20%20%20template%3A%20%22%23temp%22%2C%0A%20%20%20%20%20%20%20%20data()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20msg%3A%20%22helle%20temp%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20parentData%3A%20%22this%20is%20parent%20data%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20components%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22child-com%22%3A%20child%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20methods%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%202.%E7%88%B6%E7%BB%84%E4%BB%B6%E4%B8%AD%E5%AE%9A%E4%B9%89%20%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6%E7%9A%84%E5%A4%84%E7%90%86%E5%87%BD%E6%95%B0%EF%BC%8C%E5%8F%82%E6%95%B0%E4%B8%BA%E5%AD%90%E7%BB%84%E4%BB%B6%E4%BC%A0%E8%BF%87%E6%9D%A5%E7%9A%84%E6%95%B0%E6%8D%AE%0A%20%20%20%20%20%20%20%20%20%20%20%20getData(res)%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20console.log(%22%E5%AD%90%E7%BB%84%E4%BB%B6%E5%8F%91%E8%BF%87%E6%9D%A5%E7%9A%84%E6%95%B0%E6%8D%AE%E4%B8%BA%EF%BC%9A%22%2C%20res)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%7D%0A%0A%20%20%20%20const%20vm%20%3D%20new%20Vue(%7B%0A%20%20%20%20%20%20%20%20el%3A%20%22%23app%22%2C%0A%20%20%20%20%20%20%20%20data%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20msg%3A%20%22hello%20vue%22%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20components%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22my-com%22%3A%20com%2C%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D)%0A%3C%2Fscript%3E%0A%60%60%60%0A%0A%23%23%23%202.%20%E5%85%84%E5%BC%9F%E7%BB%84%E4%BB%B6%20-%20%E4%BC%A0%E5%80%BC%0A-%20%E9%9D%9E%E7%88%B6%E5%AD%90%E7%BB%84%E4%BB%B6%EF%BC%8C%E5%B0%B1%E6%98%AF%E5%85%84%E5%BC%9F%E7%BB%84%E4%BB%B6%EF%BC%8C%E5%85%84%E5%BC%9F%E7%BB%84%E4%BB%B6%E4%B9%8B%E9%97%B4%E5%B9%B6%E6%97%A0%E4%BB%BB%E4%BD%95%E5%85%B3%E7%B3%BB%EF%BC%8C%E5%A6%82%E6%9E%9C%E9%9C%80%E8%A6%81%E4%BC%A0%E5%80%BC%EF%BC%8C%E9%9C%80%E8%A6%81%E5%80%9F%E5%8A%A9%E4%B8%AD%E9%97%B4%E6%96%B9%EF%BC%8C%E5%A6%82%EF%BC%9A%0A%20%20%20%20-%20%E7%A7%9F%E5%AE%A2%20%3D%3D%3E%20**%E4%B8%AD%E4%BB%8B**%20%3D%3D%3E%20%E6%88%BF%E4%B8%9C%0A-%20%E4%BD%BF%E7%94%A8%20%E4%B8%AD%E5%A4%AE%E4%BA%8B%E4%BB%B6%E6%80%BB%E7%BA%BF%20%EF%BC%8C%E5%85%B6%E5%AE%9E%E5%B0%B1%E6%98%AF%E4%B8%80%E4%B8%AA%E6%96%B0%E7%9A%84vue%E5%AE%9E%E4%BE%8B%E4%BC%A0%E5%80%BC%0A-%20%E6%8E%A5%E6%94%B6%E6%95%B0%E6%8D%AE%E7%9A%84%E4%B8%80%E6%96%B9%EF%BC%8C%E9%80%9A%E8%BF%87%20%60%24on%60%20%E5%85%88%E7%9B%91%E5%90%AC%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6%EF%BC%8C%E5%B9%B6%E6%8E%A5%E6%94%B6%E5%80%BC%0A-%20%E5%8F%91%E9%80%81%E6%95%B0%E6%8D%AE%E7%9A%84%E4%B8%80%E6%96%B9%EF%BC%8C%E9%80%9A%E8%BF%87%20%60%24emit%60%20%E8%A7%A6%E5%8F%91%E4%BA%8B%E4%BB%B6%EF%BC%8C%E5%B9%B6%E4%BC%A0%E5%80%BC%0A%0A%60%60%60html%0A%3Cbody%3E%0A%20%20%20%20%3Cdiv%20id%3D%22app%22%3E%0A%20%20%20%20%20%20%20%20%3Cmy-nav%3E%3C%2Fmy-nav%3E%0A%20%20%20%20%20%20%20%20%3Cmy-cont%3E%3C%2Fmy-cont%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%3C%2Fbody%3E%0A%3Cscript%20src%3D%22libs%2Fvue.js%22%3E%3C%2Fscript%3E%0A%3Ctemplate%20id%3D%22nav%22%3E%0A%20%20%20%20%3Cdiv%3E%0A%20%20%20%20%20%20%20%20%3Cul%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cli%20%40click%3D%22sendData('%E6%89%8B%E6%9C%BA')%22%3E%E6%89%8B%E6%9C%BA%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cli%20%40click%3D%22sendData('%E7%94%B5%E8%84%91')%22%3E%E7%94%B5%E8%84%91%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cli%20%40click%3D%22sendData('%E9%9F%B3%E7%AE%B1')%22%3E%E9%9F%B3%E7%AE%B1%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%3C%2Ful%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%3C%2Ftemplate%3E%0A%3Ctemplate%20id%3D%22cont%22%3E%0A%20%20%20%20%3Cdiv%3E%0A%20%20%20%20%20%20%20%20%3Cdiv%3E%E8%BF%99%E9%87%8C%E6%98%AF%7B%7Btit%7D%7D%E4%B8%BB%E5%9C%BA%3C%2Fdiv%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%3C%2Ftemplate%3E%0A%3Cscript%3E%0A%20%20%20%20%2F%2F%201.%E4%BD%BF%E7%94%A8%20%E4%B8%AD%E5%A4%AE%E4%BA%8B%E4%BB%B6%E6%80%BB%E7%BA%BF%20%EF%BC%8C%E5%85%B6%E5%AE%9E%E5%B0%B1%E6%98%AF%E4%B8%80%E4%B8%AA%E6%96%B0%E7%9A%84vue%E5%AE%9E%E4%BE%8B%E4%BC%A0%E5%80%BC%0A%20%20%20%20const%20bus%20%3D%20new%20Vue()%3B%0A%20%20%20%20const%20Nav%20%3D%20%7B%0A%20%20%20%20%20%20%20%20template%3A%20%22%23nav%22%2C%0A%20%20%20%20%20%20%20%20methods%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20sendData(i)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%203.%20%E5%8F%91%E9%80%81%E6%95%B0%E6%8D%AE%E7%9A%84%E4%B8%80%E6%96%B9%EF%BC%8C%E8%A7%A6%E5%8F%91%E4%BA%8B%E4%BB%B6%EF%BC%8C%E5%B9%B6%E4%BC%A0%E5%80%BC%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20bus.%24emit(%22titData%22%2C%20i)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%7D%0A%20%20%20%20const%20Cont%20%3D%20%7B%0A%20%20%20%20%20%20%20%20template%3A%20%22%23cont%22%2C%0A%20%20%20%20%20%20%20%20data()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20tit%3A%20%22%E6%89%8B%E6%9C%BA%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20created()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%202.%E6%8E%A5%E6%94%B6%E6%95%B0%E6%8D%AE%E7%9A%84%E4%B8%80%E6%96%B9%EF%BC%8C%E7%9B%91%E5%90%AC%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6%EF%BC%8C%E5%B9%B6%E6%8E%A5%E6%94%B6%E5%80%BC%0A%20%20%20%20%20%20%20%20%20%20%20%20bus.%24on(%22titData%22%2C%20(res)%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20this.tit%20%3D%20res%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D)%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%7D%0A%0A%20%20%20%20const%20vm%20%3D%20new%20Vue(%7B%0A%20%20%20%20%20%20%20%20el%3A%20%22%23app%22%2C%0A%20%20%20%20%20%20%20%20components%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22my-nav%22%3A%20Nav%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22my-cont%22%3A%20Cont%2C%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D)%0A%3C%2Fscript%3E%0A%60%60%60%0A%0A%0A%0A%23%23%23%203.%20%E5%AD%90%E7%BB%84%E4%BB%B6%E4%BD%BF%E7%94%A8%E7%88%B6%E7%BB%84%E4%BB%B6%E7%9A%84%E6%96%B9%E6%B3%95%E5%92%8C%E6%95%B0%E6%8D%AE%0A-%20%E5%9C%A8%E5%AD%90%E7%BB%84%E4%BB%B6%E4%B8%AD%E5%8F%AF%E4%BB%A5%E7%9B%B4%E6%8E%A5%E9%80%9A%E8%BF%87%20%60%24parent%60%20%E6%8B%BF%E5%88%B0%E7%88%B6%E7%BB%84%E4%BB%B6%E7%9A%84%E5%AE%9E%E4%BE%8B%EF%BC%8C%E4%BB%8E%E8%80%8C%E8%AE%BF%E9%97%AE%E7%88%B6%E7%BB%84%E4%BB%B6%E7%9A%84%E6%96%B9%E6%B3%95%E6%88%96%E6%95%B0%E6%8D%AE%0A%60%60%60html%0A%3Ctemplate%20id%3D%22child%22%3E%0A%20%20%20%20%3Cdiv%3E%0A%20%20%20%20%20%20%20%20%3Ch2%3E%E5%AD%90%E7%BB%84%E4%BB%B6%E4%B8%AD%E7%9A%84%E6%95%B0%E6%8D%AE%EF%BC%9A%7B%7Bmsg%7D%7D%3C%2Fh2%3E%0A%20%20%20%20%20%20%20%20%3Cp%3E%E5%AD%90%E7%BB%84%E4%BB%B6%E6%8B%BF%E5%88%B0%E7%9A%84%E7%88%B6%E7%BB%84%E4%BB%B6%E7%9A%84%E6%95%B0%E6%8D%AE%EF%BC%9A%7B%7B%24parent.msg%7D%7D%3C%2Fp%0A%20%20%20%20%3C%2Fdiv%3E%0A%3C%2Ftemplate%3E%0A%60%60%60%0A%0A%23%23%23%204.%20%E7%88%B6%E7%BB%84%E4%BB%B6%E4%BD%BF%E7%94%A8%E5%AD%90%E7%BB%84%E4%BB%B6%E7%9A%84%E6%96%B9%E6%B3%95%E5%92%8C%E6%95%B0%E6%8D%AE%0A1.%20%E5%9C%A8%E5%AD%90%E7%BB%84%E4%BB%B6%E7%9A%84%E8%B0%83%E7%94%A8%E5%A4%84%EF%BC%8C%E4%BD%BF%E7%94%A8%E8%87%AA%E5%AE%9A%E4%B9%89%E5%B1%9E%E6%80%A7%60ref%60%E6%B7%BB%E5%8A%A0%E5%AD%90%E7%BB%84%E4%BB%B6%E5%88%AB%E5%90%8D%0A%60%60%60html%0A%3Ctemplate%20id%3D%22temp%22%3E%0A%20%20%20%20%3Cdiv%3E%0A%20%20%20%20%20%20%20%20%3Ch1%3E%7B%7Bmsg%7D%7D%3C%2Fh1%3E%0A%20%20%20%20%20%20%20%20%3Cinput%20type%3D%22button%22%20value%3D%22%E8%8E%B7%E5%8F%96%E5%AD%90%E7%BB%84%E4%BB%B6%E6%95%B0%E6%8D%AE%22%20%40click%3D%22getData%22%3E%0A%20%20%20%20%20%20%20%20%3Cp%3E%E7%88%B6%E7%BB%84%E4%BB%B6%E6%8B%BF%E5%88%B0%E7%9A%84%E5%AD%90%E7%BB%84%E4%BB%B6%E7%9A%84%E6%95%B0%E6%8D%AE%EF%BC%9A%7B%7B%20childMsg%20%7D%7D%3C%2Fp%3E%0A%20%20%20%20%20%20%20%20%3C!--%201.%E5%9C%A8%E5%AD%90%E7%BB%84%E4%BB%B6%E7%9A%84%E8%B0%83%E7%94%A8%E5%A4%84%EF%BC%8C%E4%BD%BF%E7%94%A8%E8%87%AA%E5%AE%9A%E4%B9%89%E5%B1%9E%E6%80%A7%60ref%60%E6%B7%BB%E5%8A%A0%E5%AD%90%E7%BB%84%E4%BB%B6%E5%88%AB%E5%90%8D%20--%3E%0A%20%20%20%20%20%20%20%20%3Cchild-com%20ref%3D%22test%22%3E%3C%2Fchild-com%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%3C%2Ftemplate%3E%0A%60%60%60%0A2.%20%E5%9C%A8%E7%88%B6%E7%BB%84%E4%BB%B6%E4%B8%AD%EF%BC%8C%E4%BD%BF%E7%94%A8%20%60this.%24refs.%E5%AD%90%E7%BB%84%E4%BB%B6%E5%88%AB%E5%90%8D%60%20%E8%8E%B7%E5%8F%96%E5%88%B0%E5%AD%90%E7%BB%84%E4%BB%B6%E5%AE%9E%E4%BE%8B%EF%BC%8C%E4%BB%8E%E8%80%8C%E8%AE%BF%E9%97%AE%E5%AD%90%E7%BB%84%E4%BB%B6%E7%9A%84%E6%95%B0%E6%8D%AE%E5%92%8C%E6%96%B9%E6%B3%95%0A%60%60%60js%0Aconst%20com%20%3D%20%7B%0A%20%20%20%20template%3A%20%22%23temp%22%2C%0A%20%20%20%20data()%20%7B%0A%20%20%20%20%20%20%20%20return%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20msg%3A%20%22hello%20parent-temp%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20childMsg%3A%22%22%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%2C%0A%20%20%20%20components%3A%20%7B%0A%20%20%20%20%20%20%20%20%22child-com%22%3A%20child%0A%20%20%20%20%7D%2C%0A%20%20%20%20methods%3A%20%7B%0A%20%20%20%20%20%20%20%20getData()%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%202.%20%E5%9C%A8%E7%88%B6%E7%BB%84%E4%BB%B6%E4%B8%AD%EF%BC%8C%E4%BD%BF%E7%94%A8%20%60this.%24refs.%E5%AD%90%E7%BB%84%E4%BB%B6%E5%88%AB%E5%90%8D%60%20%E8%8E%B7%E5%8F%96%E5%88%B0%E5%AD%90%E7%BB%84%E4%BB%B6%E5%AE%9E%E4%BE%8B%EF%BC%8C%E4%BB%8E%E8%80%8C%E8%AE%BF%E9%97%AE%E5%AD%90%E7%BB%84%E4%BB%B6%E7%9A%84%E6%95%B0%E6%8D%AE%E5%92%8C%E6%96%B9%E6%B3%95%0A%20%20%20%20%20%20%20%20%20%20%20%20this.childMsg%20%3D%20this.%24refs.test.msg%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%7D%0A%60%60%60%0A%0A%0A%23%20%E4%BA%94%E3%80%81provide%20%2B%20inject%0A-%20provide%20%E5%92%8C%20inject%20%E4%B8%BB%E8%A6%81%E5%9C%A8%E5%BC%80%E5%8F%91%E9%AB%98%E9%98%B6%E6%8F%92%E4%BB%B6%2F%E7%BB%84%E4%BB%B6%E5%BA%93%E6%97%B6%E4%BD%BF%E7%94%A8%E3%80%82%E5%B9%B6%E4%B8%8D%E6%8E%A8%E8%8D%90%E7%94%A8%E4%BA%8E%E6%99%AE%E9%80%9A%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F%E4%BB%A3%E7%A0%81%E4%B8%AD%E3%80%82%0A-%20%E7%94%A8%E4%BA%8E%E4%B8%80%E4%B8%AA%E7%A5%96%E5%85%88%E7%BB%84%E4%BB%B6%E5%90%91%E5%85%B6%E6%89%80%E6%9C%89%E5%AD%90%E5%AD%99%E5%90%8E%E4%BB%A3%E6%B3%A8%E5%85%A5%E4%B8%80%E4%B8%AA%E4%BE%9D%E8%B5%96%EF%BC%8C%E4%B8%8D%E8%AE%BA%E7%BB%84%E4%BB%B6%E5%B1%82%E6%AC%A1%E6%9C%89%E5%A4%9A%E6%B7%B1%EF%BC%8C%E5%B9%B6%E5%9C%A8%E5%85%B6%E4%B8%8A%E4%B8%8B%E6%B8%B8%E5%85%B3%E7%B3%BB%E6%88%90%E7%AB%8B%E7%9A%84%E6%97%B6%E9%97%B4%E9%87%8C%E5%A7%8B%E7%BB%88%E7%94%9F%E6%95%88%E3%80%82%0A-%20provide%20%E9%80%89%E9%A1%B9%E6%98%AF%E4%B8%80%E4%B8%AA%E5%AF%B9%E8%B1%A1%0A-%20inject%20%E9%80%89%E9%A1%B9%E6%98%AF%E4%B8%80%E4%B8%AA%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%95%B0%E7%BB%84%0A%60%60%60js%0A%2F%2F%20%E7%88%B6%E7%BA%A7%E7%BB%84%E4%BB%B6%E6%8F%90%E4%BE%9B%20'foo'%0Avar%20Provider%20%3D%20%7B%0A%20%20provide%3A%20%7B%0A%20%20%20%20foo%3A%20'bar'%0A%20%20%7D%2C%0A%20%20%2F%2F%20...%0A%7D%0A%0A%2F%2F%20%E5%AD%90%E7%BB%84%E4%BB%B6%E6%B3%A8%E5%85%A5%20'foo'%0Avar%20Child%20%3D%20%7B%0A%20%20inject%3A%20%5B'foo'%5D%2C%0A%20%20created%20()%20%7B%0A%20%20%20%20console.log(this.foo)%20%2F%2F%20%3D%3E%20%22bar%22%0A%20%20%7D%0A%20%20%2F%2F%20...%0A%7D%0A%60%60%60%0A%0A%0A%0A</center></body></html>